<template>
  <main>
    <!--第一个弹框 -->
    <Popup :listOne="data.listOne[0]" @ShowM="One" :sn="false">
      <template v-slot:one>
        <h2 class="top">选择考试</h2>
      </template>
    </Popup>
    <!--第二个弹框 -->
    <Popup :listOne="data.listOne[2]" @Shows="Two">
      <template v-slot:one>
        <div class="tbox">
          <van-icon name="arrow-left" size="45px" @click="back1" class="icon" />
          <h2 class="top1">{{ data.Name }}</h2>
        </div>
      </template>
    </Popup>
    <!--第三个弹框 -->
    <Popup :listOne="data.listOne[1]" @ShowM="There">
      <template v-slot:one>
        <div class="tbox">
          <van-icon name="arrow-left" size="25px" @click="back2" />
          <h2 class="top1">{{ data.Name }}</h2>
          <van-button
            color="#f15a24"
            size="mini"
            class="an"
            round
            v-if="data.ans === true"
            @click="wan"
            >完成</van-button
          >
        </div>
      </template>
    </Popup>
    <div class="Zbox">
      <div class="Ztop">
        <div class="tleft">
          <h3 @click="back">{{ data.Name }}></h3>
        </div>
        <div class="tright">
          <div class="Timg1"></div>
          <div class="Timg2"></div>
        </div>
      </div>
      <ul class="tab">
        <li
          v-for="(item, index) in data.Tab"
          :key="index"
          @click="tabjump(item.id)"
          :class="data.tabId === item.id ? 'Tactive' : ''"
        >
          {{ item.title }}
        </li>
      </ul>
      <div class="Bn">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item, index) in data.Bner" :key="index">
            <img :src="item.banner_img" alt="" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div style="text-align: center">
        <img
          src=""
          alt=""
        />
        <p style="color: #a2a7b8; font-size: 35px">距离考研19天</p>
      </div>
    </div>
  </main>
</template>

<script setup>
import { onMounted, reactive, onBeforeMount } from "vue";
import Popup from "../components/Popup.vue";
import { Popups, Popups1, Tab, banners } from "../http/api";
const data = reactive({
  listOne: [
    {
      Oshow: true,
      list: [],
    },
    {
      Oshow: false,
      list: [],
    },
    {
      Oshow: false,
      list: [
        {
          title: "在校",
        },
        {
          title: "在职",
        },
      ],
    },
  ],
  Id: 0,
  tabId: 0,
  ans: false,
  Name: "",
  Tab: [],
  ti: [
    {
      id: 0,
      title: "精选",
    },
  ],
  Bner: [],
});
// 请求数据
onMounted(async () => {
  const res = await Popups();
  console.log(res);
  data.listOne[0].list = res.data;
  // console.log(data.listOne[0].list);
  getlist();
});
// 挂载之前
onBeforeMount(() => {
  let obj = localStorage.getItem("key");
  let vs = JSON.parse(obj) || [];
  if (vs.length !== 3) {
    localStorage.removeItem("key");
  } else if (vs.length === 3) {
    data.listOne[0].Oshow = false;
    console.log(vs[0].title);
    data.Name = vs[0].title;
    data.Id = vs[0].id;
  }
});
// 第一个弹出框
const One = async (id, name) => {
  data.listOne[0].Oshow = false;
  data.listOne[2].Oshow = true;
  console.log(id, name);
  data.Id = id;
  console.log(id);
  data.Name = name;

  const res = await Popups1(id);
  // console.log(res);
  data.listOne[1].list = res.data;
};
// 第二个弹框
const Two = (id) => {
  if (id) {
    data.listOne[2].Oshow = false;
    data.listOne[1].Oshow = true;
  }
};
// 第三个弹框
const There = (id) => {
  data.ans = true;
};
// 返回1
const back1 = () => {
  data.listOne[1].Oshow = false;
  data.listOne[0].Oshow = true;
  Gong();
};
// 返回2
const back2 = () => {
  data.listOne[1].Oshow = false;
  data.listOne[2].Oshow = true;
  data.ans = false;
  Gong();
};
const Gong = () => {
  let obj = localStorage.getItem("key");
  let vs = JSON.parse(obj) || [];
  vs.pop();
  localStorage.setItem("key", JSON.stringify(vs));
};
// 完成按钮
const wan = async () => {
  data.listOne[1].Oshow = false;
  getlist();
};
console.log(data.Sone);
const getlist = async () => {
  if (data.Name) {
    const res = await Tab(data.Id);
    console.log(res);
    data.Tab = [...data.ti, ...res.data];
    const res1 = await banners(data.Id);
    console.log(res1);
    data.Bner = res1.data;
  }
};
// tab切换
const tabjump = (id) => {
  data.tabId = id;

  // console.log();
};
const back = async () => {
  data.listOne[1].Oshow = true;

  const res = await Popups1(data.Id);
  // console.log(res);
  data.listOne[1].list = res.data;
  Gong();
};
</script>

<style lang="scss" scoped>
.top {
  text-align: center;
  margin: 40px 0;
}

.top1 {
  position: absolute;
  left: 290px;
  top: 2px;
}

.tbox {
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
  position: relative;
  box-sizing: border-box;
  padding-left: 30px;
  margin-bottom: 60px;
  margin-top: 40px;
}

.an {
  margin-left: 60px;
  width: 140px;
  height: 75px;
  font-size: 30px;
  position: absolute;
  right: 10px;
  top: 0px;
}
.Zbox {
  width: 100%;
  .Ztop {
    font-size: 35px;
    width: 100%;
    height: 100px;
    // background-color: red;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 20px 10px;
    .tright {
      width: 250px;
      display: flex;
      justify-content: space-around;
      .Timg1 {
        width: 50px;
        height: 50px;
        background: url()
          no-repeat;
        background-size: 100% 100%;
      }
      .Timg2 {
        width: 50px;
        height: 50px;
        background: url()
          no-repeat;
        background-size: 100% 100%;
      }
    }
  }
  .tab {
    font-size: 35px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    li {
      height: 70px;
    }
    .Tactive {
      color: #f15a24;
      border-bottom: 5px solid #f15a24;
    }
  }
  .Bn {
    width: 100%;
    box-sizing: border-box;
    padding: 20px 20px;
    .my-swipe {
      width: 100%;
      height: 300px;
      border-radius: 30px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.icon {
  position: absolute;
  left: 10px;
  top: 8px;
  // top: 10px;
}
</style>
